<template>
	<div class="container">
		<div class="home_left">
			<div class="phone-box">
				<!-- <div
					class="phone-box-header"
					:style="{ 'background-color': selectColor }"
				>
					<span class="time">16:19</span>
					<span class="dianliang">70%</span>
				</div> -->
				<div
					class="phone-box-nav"
					:style="{
						'background-color': selectColor,
						position: 'fixed',
						width: '100%',
						'z-index': '1',
					}"
				>
					<i
						class="el-icon-arrow-left"
						@click="pushPage"
						style="padding-left: 0.5rem"
					></i>
					<span class="font-weight-700" style="font-size: 1.1rem">
						交易成功
					</span>
					<div class="more-style">
						<span class="jy-style" v-if="message !== ''">{{
							message
						}}</span>
						<img    :src="geturl(`../assets/img/more2.png`)"  alt="" />
					</div>
				</div>
				<div class="see-more">
					<div style="font-weight: 700; margin: 0.5rem 0">
						看看别人还在这家店买些啥
					</div>
					<div class="goods-card-list">
						<div
							v-for="(item, index) in moreGoodsList"
							:key="index"
							class="more-goods-card"
						>
							<div class="good-img">
								<img :src="item.sptp"  alt="" />
							</div>
							<div class="good-price">
								<span
									><span class="small-font-size">￥</span
									>{{ item.spjg }}</span
								>
								<div class="good-price-img" :style="'background: url('+geturl('../assets/img/shopIcon')+');'"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="phone-box-hwdz" v-show="sfzsshxx == '1'">
					<div class="phone-box-hwdz-left">
						<img  :src="geturl(`../assets/img/addess.png`)" alt="" />
					</div>

					<div class="phone-box-hwdz-content">
						<div class="phone-box-hwdz-content-lxfs">
							<div class="phone-box-hwdz-ryxm">
								{{ receiverName }}
							</div>
							<div class="phone-box-hwdz-lxdh">
								{{ receiverPhone }}
							</div>
						</div>
						<div>{{ receiverPhone }}</div>
					</div>
					<div>
						<el-button round>修改</el-button>
					</div>
				</div>

				<div class="phone-box-spxx">
					<div class="phone-box-spxx-img">
						<img  :src="geturl(`../assets/img/shop.png`)"  alt="" />
						<span style="font-weight: 700; margin-left: 0.5rem">{{
							dpmc
						}}</span>
						<div>
							<i class="el-icon-arrow-right common-grey-font"></i>
						</div>
					</div>
					<div class="spxx-row-1">
						<div class="sptp">
							<img :src="goodsImage" alt="" />
						</div>
						<div class="phone-box-dzxx">
							<div class="phone-box-dzxx-div">
								{{ goodsName }}
							</div>
							<div class="common-grey-font spgg">
								{{ goodsSpec }}
							</div>
							<div
								class="common-orange-font"
								style="font-size: 0.7rem"
							>
								{{ logDesc }}
							</div>
							<!-- <div >
								<el-tag type="warning">七天无理由退换货</el-tag>
							</div> -->
						</div>
						<div class="spxx-price">
							<div class="common-black-font">
								<span class="small-font-size">￥</span>
								<span>{{ goodsPrice || 0.0 }}</span>
							</div>
							<div
								class="common-grey-font"
								style="font-size: 0.7rem"
							>
								x{{ goodsCount || '1' }}
							</div>
						</div>
					</div>
					<div class="spxx-row-2">
						<div class="spxx-row-2-box">
							<el-button
								size="small"
								round
								v-for="(item, index) in centerbtns"
								:key="index"
                                v-show="item && item!==''"
							>
								{{ item }}
							</el-button>
							<!-- <el-button size="small" round>卖了换钱</el-button>
							<el-button size="small" round>售后成功</el-button> -->
						</div>
					</div>
					<div class="spxx-row-common" v-if="!zksqvisible">
						<div>商品总价</div>
						<div class="spxx-row-common-content common-black-font">
							<span class="small-font-size">￥</span>

							<span class="">{{ totalPrice }}</span>
						</div>
					</div>
					<div class="spxx-row-common" v-if="!zksqvisible">
						<div>运费</div>
						<div class="spxx-row-common-content common-black-font">
							<span class="small-font-size">￥</span>
							<span class="">{{ sendPrice }}</span>
						</div>
					</div>
					<div class="spxx-row-common">
						<div>实付款</div>
						<div class="spxx-row-common-content common-orange-font">
							<span class="small-font-size">￥</span>
							<span class="common-orange-font">{{
								relPrice
							}}</span>
						</div>
					</div>
					<div class="spxx-row-common sh-style">
						<div>收货信息:</div>
						<div class="spxx-row-common-content">
							<span class="common-grey-font">
								{{ receiverName }}
								{{ receiverPhone !== '' ? ',' : '' }}
								{{ receiverPhone }}
								{{ receiverAddress !== '' ? ',' : '' }}
								{{ receiverAddress }}
							</span>
						</div>
					</div>
					<div class="spxx-row-common">
						<div>订单编号:</div>
						<div class="spxx-row-common-content">
							<span class="common-grey-font">{{ ddbh }}</span>
							<span style="color: #969696; margin: 0 0.3rem"
								>|</span
							>
							<span>复制</span>
						</div>
					</div>
					<div class="spxx-row-common">
						<div>交易快照:</div>
						<div class="spxx-row-common-content common-grey-font">
							<span style="margin-right: 0.5rem"
								>发生交易争议时，可作为判断依据</span
							>
							<i class="el-icon-arrow-right"></i>
						</div>
					</div>
					<div class="spxx-row-common">
						<div>花呗账单:</div>
						<div class="spxx-row-common-content common-grey-font">
							<span style="margin-right: 0.5rem"
								>去支付宝查看</span
							>
							<i class="el-icon-arrow-right"></i>
						</div>
					</div>
					<div class="spxx-row-common" v-if="!zksqvisible">
						<div>支付宝交易号:</div>
						<div class="spxx-row-common-content common-grey-font">
							<span>{{ transactionNumber }}</span>
						</div>
					</div>
					<div
						class="sq-style"
						v-if="zksqvisible"
						@click="toggleVisible"
					>
						查看更多<i class="el-icon-arrow-down"></i>
					</div>
					<div v-if="!zksqvisible" class="em-style"></div>
					<div v-if="!zksqvisible">
						<div class="spxx-row-common">
							<div>创建时间</div>
							<div
								class="spxx-row-common-content common-grey-font"
							>
								<span>{{ createTime }}</span>
							</div>
						</div>
						<div class="spxx-row-common">
							<div>付款时间</div>
							<div
								class="spxx-row-common-content common-grey-font"
							>
								<span>{{ payTime }}</span>
							</div>
						</div>
						<div class="spxx-row-common">
							<div>发货时间</div>
							<div
								class="spxx-row-common-content common-grey-font"
							>
								<span>{{ sendTime }}</span>
							</div>
						</div>
						<div class="spxx-row-common">
							<div>成交时间</div>
							<div
								class="spxx-row-common-content common-grey-font"
							>
								<span>{{ dealTime }}</span>
							</div>
						</div>
					</div>
					<div
						class="sq-style"
						v-if="!zksqvisible"
						@click="toggleVisible"
					>
						收起<i class="el-icon-arrow-up"></i>
					</div>
				</div>
				<div class="phone-box-ydwt">
					<div class="common-title">遇到问题</div>
					<div class="phone-box-ydwt-box">
						<div class="phone-box-ydwt-item">
							<img   :src="geturl(`../assets/img/lxsj.png`)"  alt="" />
							<span>联系卖家</span>
						</div>
						<div class="phone-box-ydwt-item">
							<img  :src="geturl(`../assets/img/bddh.png`)" alt="" />
							<span>拨打电话</span>
						</div>
						<div class="phone-box-ydwt-item">
							<img  :src="geturl(`../assets/img/tssj.png`)" alt="" />
							<span>投诉商家</span>
						</div>
					</div>
				</div>
			</div>
			<div class="photo-bottom">
				<div style="color: #acacac; margin-left: 0.5rem">更多</div>
				<div class="more-btn-div">
					<el-button
						class="more-btn"
						size="small"
						round
						v-for="(item, index) in bottombtns"
						:key="index"
						:style="{
							color: item.color,
							'border-color': item.color,
						}"
					>
						{{ item.text }}
					</el-button>
				</div>
			</div>
		</div>
		<div class="home_right">
			<el-form label-width="5rem" style="padding: 0 1rem">
				<el-form-item label="模板名称:">
					<el-input v-model="name"></el-input>
				</el-form-item>
				<div class="common-title-class">订单信息</div>
				<el-form-item label="订单样式:">
					<span
						v-for="item in colorList"
						:key="item"
						@click="handleChangeColor(item)"
						class="color-span"
						:style="{ 'background-color': item }"
					>
						<!-- <color-picker
							:defaultColor="item"
							:value="item"
							disabled
						></color-picker> -->
					</span>
					<span class="zdy-class">自定义:</span>
					<color-picker
						v-model="selectColor"
						@change="handleChangeColor"
					></color-picker>
				</el-form-item>
				<el-form-item label="订单编号:">
					<el-input v-model="ddbh"></el-input>
				</el-form-item>

				<div class="common-title-class">收件人信息</div>
				<el-form-item label="收货人:">
					<el-input v-model="receiverName"></el-input>
				</el-form-item>
				<el-form-item label="收货电话:">
					<el-input v-model="receiverPhone"></el-input>
				</el-form-item>
				<el-form-item label="收货地址:">
					<el-input v-model="receiverAddress"></el-input>
				</el-form-item>
				<el-form-item label="配送时间:">
					<el-input v-model="receiverTime"></el-input>
				</el-form-item>
				<div class="common-title-class">商品信息</div>
				<el-form-item label="店铺名称:">
					<el-input v-model="dpmc"></el-input>
				</el-form-item>
				<el-form-item label="商品图片:">
					<input
						@change="upload"
						type="file"
						hidden
						id="uploadInput"
					/>
					<el-button type="primary" @click="uploadImg"
						>点击上传</el-button
					>
					<el-button type="info" @click="clearImg"
						>清除图片</el-button
					>
				</el-form-item>
				<el-form-item label="商品名称:">
					<el-input v-model="goodsName"></el-input>
				</el-form-item>
				<el-form-item label="商品规格:">
					<el-input v-model="goodsSpec"></el-input>
				</el-form-item>
				<el-form-item label="商品价格:">
					<el-input v-model="goodsPrice"></el-input>
				</el-form-item>
				<el-form-item label="商品件数:">
					<el-input v-model="goodsCount"></el-input>
				</el-form-item>
				<el-form-item label="物流描述:">
					<el-input v-model="logDesc"></el-input>
				</el-form-item>
				<el-form-item label="商品总价:">
					<el-input v-model="totalPrice"></el-input>
				</el-form-item>
				<el-form-item label="运费:">
					<el-input v-model="sendPrice"></el-input>
				</el-form-item>
				<el-form-item label="实付款:">
					<el-input v-model="relPrice"></el-input>
				</el-form-item>
				<el-form-item label="支付宝交易号:">
					<el-input v-model="transactionNumber"></el-input>
				</el-form-item>
				<el-form-item label="创建时间:">
					<el-input v-model="createTime"></el-input>
				</el-form-item>
				<el-form-item label="付款时间:">
					<el-input v-model="payTime"></el-input>
				</el-form-item>
				<el-form-item label="发货时间:">
					<el-input v-model="sendTime"></el-input>
				</el-form-item>
				<el-form-item label="成交时间:">
					<el-input v-model="dealTime"></el-input>
				</el-form-item>

				<div class="common-title-class">其他人买了啥</div>

				<div v-for="(item, index) in moreGoodsList" :key="index">
					<input
						@change="uploadMoreImg(index)"
						type="file"
						hidden
						:id="'uploadInput' + index"
					/>
					<el-form-item :label="'商品图片' + (index + 1)">
						<!-- <el-input v-model="item.sptp"></el-input> -->
						<el-button type="primary" @click="uploadspImg(index)"
							>点击上传</el-button
						>
						<el-button type="info" @click="clearspImg(index)"
							>清除图片</el-button
						>
					</el-form-item>
					<el-form-item :label="'商品价格' + (index + 1)">
						<el-input v-model="item.spjg"></el-input>
					</el-form-item>
					<div
						v-if="index == moreGoodsList.length - 1"
						class="addicon-style"
					>
						<i
							class="el-icon-plus"
							@click="editGoodsList('add', index)"
							v-if="moreGoodsList.length < 3"
						></i>
						<i
							class="el-icon-minus"
							@click="editGoodsList('sub', index)"
							v-if="moreGoodsList.length > 1"
						></i>
					</div>
				</div>
				<div class="common-title-class">商品按钮</div>
				<div v-for="(item, index) in centerbtns" :key="index">
					<el-form-item :label="'按钮内容' + (index + 1)">
						<el-input v-model="centerbtns[index]"></el-input>
					</el-form-item>
					<!-- <el-form-item :label="'颜色' + (index + 1)">
						<span class="zdy-class">自定义:</span>
						<color-picker
							v-model="item.color"
							@click="setCurcenterBtnIndex(index)"
							@change="handleChangecenterColor"
						></color-picker>
					</el-form-item> -->
				</div>
				<el-button
					@click="addOrSubcenterBtn('add')"
					v-if="centerbtns.length < 3"
				>
					新增</el-button
				>
				<el-button
					@click="addOrSubcenterBtn('sub')"
					v-if="centerbtns.length > 1"
				>
					减少</el-button
				>
				<div class="common-title-class">底部按钮</div>
				<div v-for="(item, index) in bottombtns" :key="index">
					<el-form-item :label="'按钮内容' + (index + 1)">
						<el-input v-model="item.text"></el-input>
					</el-form-item>
					<el-form-item :label="'颜色' + (index + 1)">
						<span class="zdy-class">自定义:</span>
						<color-picker
							v-model="item.color"
							@click="setCurButtomBtnIndex(index)"
							@change="handleChangebuttomColor"
						></color-picker>
					</el-form-item>
				</div>
				<el-button
					@click="addOrSubButtomBtn('add')"
					v-if="bottombtns.length < 3"
				>
					新增</el-button
				>
				<el-button
					@click="addOrSubButtomBtn('sub')"
					v-if="bottombtns.length > 1"
				>
					减少</el-button
				>
				<div class="common-title-class">其他</div>
				<!-- <el-form-item label="是否展示收货信息:">
					<el-select v-model="sfzsshxx">
						<el-option label="是" value="1"></el-option>
						<el-option label="否" value="0"></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item label="未读消息:">
					<el-input v-model="message"></el-input>
				</el-form-item>
			</el-form>
			<div class="save-style">
				<el-button type="primary" @click="save">保存</el-button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			selectColor: '#f2f2f2',
			zksqvisible: true,
			colorList: [
				'#f2f2f2',
				'#CEEFBD',
				'#BAEEFF',
				'#456354',
				'#A88565',
				'#00AB8F',
				'#FFECFF',
				'#8CCCBB',
				'#E0DAE5',
				'#FFD3BB',
				'#1D8EA1',
				'#E6A23C',
				'#EB7A3E',
			],

			ddbh: '1579115823950954680',
			receiverName: '米莉',
			name: '模板测试名称1',
			receiverPhone: '86-19548137546',
			receiverAddress: '浙江省 杭州市 上城区 彭埠街道 秋涛北路178号',
			receiverTime: '12',
			dpmc: 'Obliviate 一忘皆空',
			goodsName: '一忘皆空/"小睫毛"防晒空调11111111111',
			goodsSpec: '浅珊瑚粉[3个工作日];S[店主码] ',
			message: '5',
			sfzsshxx: '',
			goodsPrice: '141.55',
			totalPrice: '141.55',
			sendPrice: '0.00',
			relPrice: '141.55',
			goodsCount: '1',
			logDesc: ' 07月15日 21:20前发货 ',
			transactionNumber: '2022061722001128315727222222',
			createTime: '2022-05-31 21:18:07',
			payTime: '2022-05-31 21:18:07',
			sendTime: '2022-05-31 21:18:07',
			dealTime: '2022-05-31 21:18:07',
			moreGoodsList: [
				{
					sptp: '../assets/img/default.png',
					spjg: '239',
				},
				{
					sptp: '../assets/img/default.png',
					spjg: '159',
				},
				{
					sptp: '../assets/img/default.png',
					spjg: '189',
				},
			],
			centerbtns: ['卖了换钱', '售后成功'],
			bottombtns: [
				{
					text: '卖了换钱',
					color: '',
				},
				{
					text: '查看物流',
					color: '',
				},
				{
					text: '评价',
					color: '#df4500',
				},
			],
			goodsImage: '../assets/img/default.png',
			curIdx: '',
			id: '',
		}
	},
	methods: {
		editGoodsList(type, index) {
			if (type == 'sub') {
				this.$delete(this.moreGoodsList, index)
			} else {
				this.moreGoodsList.push({
					sptp: '../assets/img/default.png',
					spjg: '',
				})
			}
		},
		handleChangeColor(val) {
			this.selectColor = val
		},
		setCurButtomBtnIndex(index) {
			this.curIdx = index
		},
		handleChangebuttomColor(val) {
			this.$set(this.bottombtns, this.curIdx, val)
		},
		uploadImg() {
			document.getElementById('uploadInput').value = ''
			document.getElementById('uploadInput').click()
		},
		uploadspImg(index) {
			let id = 'uploadInput' + index
			document.getElementById(id).value = ''
			document.getElementById(id).click()
		},
        geturl(url) {
            return url
        },
		upload() {
			let files = document.getElementById('uploadInput').files
			// this.goodsImage = window.URL.createObjectURL(files[0])
			this.fileUpload(files[0]).then((res) => {
				console.error(res)
				if (res == -1) {
					this.$message('上传失败')
				} else {
					this.goodsImage = res
				}
			})
		},
		async fileUpload(file) {
			let formData = new FormData()
			formData.append('file', file)
			const { data: res } = await this.$http.post(
				'/order/upload',
				formData
			)
			console.error(res)
			return new Promise(function (resolve, reject) {
				if (res.code * 1 == 200) {
					resolve('http://81.68.68.195:8090/' + res.data)
				} else {
					reject(-1)
				}
			})
		},
		uploadMoreImg(index) {
			let id = 'uploadInput' + index
			let files = document.getElementById(id).files
			this.fileUpload(files[0]).then((res) => {
				console.error(res)
				if (res == -1) {
					this.$message('上传失败')
				} else {
					this.moreGoodsList[index].sptp = res
				}
			})
		},
		clearImg() {
			this.goodsImage = '../assets/img/default.png'
		},
		clearspImg(index) {
			this.moreGoodsList[index].sptp = '../assets/img/default.png'
		},
		toggleVisible() {
			this.zksqvisible = !this.zksqvisible
		},
		addOrSubButtomBtn(type) {
			if (type == 'add') {
				this.bottombtns.push({
					text: '按钮',
					color: '',
				})
			} else {
				this.bottombtns.pop()
			}
		},
		pushPage() {
			this.$emit('push', 'manage')
		},
		save() {
			// TO DO
			let params = {
				userId: JSON.parse(window.sessionStorage.getItem('userInfo'))
					.id,
				bottomBtn1: this.bottombtns[0].text || '',
				bottomBtn1Color: this.bottombtns[0].color || '',
				bottomBtn2: this.bottombtns[1].text || '',
				bottomBtn2Color: this.bottombtns[1].color || '',
				bottomBtn3: this.bottombtns[2].text || '',
				bottomBtn3Color: this.bottombtns[2].color || '',
				goodsBtn1: this.centerbtns[0],
				goodsBtn2: this.centerbtns[1],
				goodsBtn3: this.centerbtns[2],
				goodsCount: this.goodsCount,
				goodsImage: this.goodsImage,
				goodsSpec: this.goodsSpec,
				goodsName: this.goodsName,
				goodsPrice: this.goodsPrice,
				otherGoods1Image: this.moreGoodsList[0].sptp,
				otherGoods1Price: this.moreGoodsList[0].spjg,
				otherGoods2Image: this.moreGoodsList[1].sptp,
				otherGoods2Price: this.moreGoodsList[1].spjg,
				otherGoods3Image: this.moreGoodsList[0].sptp,
				otherGoods3Price: this.moreGoodsList[0].spjg,
				dealTime: this.dealTime,
				createTime: this.createTime,
				sendTime: this.sendTime,
				payTime: this.payTime,
				transactionNumber: this.transactionNumber,
				logDesc: this.logDesc,
				message: this.message,
				name: this.name,
				receiverAddress: this.receiverAddress,
				receiverName: this.receiverName,
				receiverPhone: this.receiverPhone,
				receiverTime: this.receiverTime,
				code: this.code,
				style: this.selectColor,
				relPrice: this.relPrice,
				sendPrice: this.sendPrice,
				totalPrice: this.totalPrice,
			}
			if (this.id !== '') {
				params.id = this.id
			}
			this.$http.post('/order/saveOrUpdate', params).then(res=>{
                if(res.code * 1== 200) {
                    this.$message(res.message);
                    this.$emit('push','manage')
                }
            })
		},
		updateForm() {
			let form = JSON.parse(window.sessionStorage.getItem('form')) || null
			console.error('form',form)
			if (form) {
				this.bottombtns = [
					{
						text: form.bottomBtn1,
						color: form.bottomBtn1Color,
					},
					{
						text: form.bottomBtn2,
						color: form.bottomBtn2Color,
					},
					{
						text: form.bottomBtn3,
						color: form.bottomBtn3Color,
					},
				].filter((item) => item && item.text !== '')
				this.centerbtns = [
					form.goodsBtn1,
					form.goodsBtn2,
					form.goodsBtn3,
				]
				this.moreGoodsList = [
					{
						sptp: form.otherGoods1Image,
						spjg: form.otherGoods1Price,
					},
					{
						sptp: form.otherGoods2Image,
						spjg: form.otherGoods2Price,
					},
					{
						sptp: form.otherGoods3Image,
						spjg: form.otherGoods3Price,
					},
				];
                Object.keys(form).forEach(item=>{
                    this[item] = form[item] || ''
                })
			}
		},
	},
	activated() {},
}
</script>

<style>
@import '../assets/css/homePage.css';
@import '../assets/css/homePageRight.css';
</style>
